'use strict'
import React from 'react'
import {commonApi} from '../../api/common'
import {tipPop} from '../tipPop'

export default React.createClass({
    getInitialState() {
        return {tasks: [], npcName: ''}
    },
    componentDidMount() {
        let self = this
        commonApi.getNpcInfo({
            npcId: this.props.opts.npcId
        }, function(err, data) {
            self.setState({tasks: data.tasks, npcName: data.name})
        })
    },
    openTipPop(taskId) {
        let self = this
        commonApi.getTaskInfo({
            taskId: taskId
        }, function(err, data) {
            tipPop.openPanel({
                title: data.name,
                message: data.desc,
                showConfirmButton: true,
                showCancelButton: true,
                confirmText: '接受任务',
                onConfirm: function() {
                    self.receiveTask(taskId)
                }
            })
        })
    },
    receiveTask(taskId) {
        commonApi.receiveTask({
            taskId: taskId
        }, function(err, data) {
            tipPop.close()
        })
    },
    render() {
        let self = this,
            taskNode = [],
            propName = window.G.propName
        this.state.tasks.forEach(function(item) {
            taskNode.push(
                <div key={item}>
                    <button onClick={self.openTipPop.bind(self, item)}>{propName[item]}</button>
                </div>
            )
        })
        return <div id='npcPanel'>
            <div className='head'>
                <div className='title'>{this.state.npcName}</div>
                <div className='desc'></div>
            </div>
            <div className='flex'>
                {taskNode}
            </div>
        </div>
    }
})
